<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" :rules="filtersRules">
                <el-row class="search-input">
                    <el-form-item label="仓库：">
                        <el-input v-model="searchFilters.name" placeholder="请输入仓库编码或仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品：">
                        <el-input v-model="searchFilters.productName" placeholder="请输入商品编码或商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="实际库存：" prop="totalMin">
                        <el-input oninput="value=value.replace(/[^\d]/g,'')" placeholder="实际库存起" v-model="searchFilters.totalMin" style="width:180px"></el-input>
                        -
                    </el-form-item>
                    <el-form-item prop="totalMax">
                        <el-input oninput="value=value.replace(/[^\d]/g,'')" placeholder="实际库存止" v-model="searchFilters.totalMax" style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item label="可售库存：" prop="availableMin">
                        <el-input oninput="value=value.replace(/[^\d]/g,'')" placeholder="可售库存起" v-model="searchFilters.availableMin" style="width:180px"></el-input>
                        -
                    </el-form-item>
                    <el-form-item prop="availableMax">
                        <el-input oninput="value=value.replace(/[^\d]/g,'')" placeholder="可售库存止" v-model="searchFilters.availableMax" style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item label="商家" prop="deptId">
                        <el-select v-model="searchFilters.deptId" placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in selectedOptionsData1" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <!-- 搜索区域按钮-查询,重置 -->
                <el-row class="search-button">
                    <el-form-item>
                        <el-button-group>
                            <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                            <el-button type="primary" size="small" @click="excelDownLoad()">导出</el-button>
                        </el-button-group>
                    </el-form-item>
                </el-row>
                <!-- 导出 -->
                <el-row class="t_r">
                    <el-form-item>
                        <el-button-group>
                        </el-button-group>
                    </el-form-item>
                </el-row>

                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :tableList="tableList" :showEditOperation=false :showOperation=false :showSelection=false :showBatchDelete=false :tableHeaderList="tableHeaderList" :totalSize="totalSize" @findPage="findPage" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import {
    exportExcel
} from "@/utils/excel";
//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        jicTable
    },

    //2.2 数据初始化区
    data() {
        var checkTotalMin = (rule, value, callback) => {
            let this_ = this;
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this_.searchFilters.totalMax == null || this_.searchFilters.totalMax == "" ||
                typeof this_.searchFilters.totalMax == "undefined"
            ) {
                callback();
            }
            if (
                Number(value) > Number(this_.searchFilters.totalMax)
            ) {
                callback(new Error("总库存起始值不得大于结束值"));
            }
            this_.$refs.searchFilters.clearValidate("totalMax");
            callback();
        };
        var checkTotalMax = (rule, value, callback) => {
            let this_ = this;
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this_.searchFilters.totalMin == null || this_.searchFilters.totalMin == "" ||
                typeof this_.searchFilters.totalMin == "undefined"
            ) {
                callback();
            }
            if (
                this_.searchFilters.totalMax == null || this_.searchFilters.totalMax == "" ||
                typeof this_.searchFilters.totalMax == "undefined"
            ) {
                callback();
            }
            if (
                Number(value) < Number(this_.searchFilters.totalMin)
            ) {
                callback(new Error("总库存结束值不得小于起始值"));
            }
            this_.$refs.searchFilters.clearValidate("totalMin");
            callback();
        };
        var checkAvailableMin = (rule, value, callback) => {
            let this_ = this;
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this_.searchFilters.availableMax == null || this_.searchFilters.availableMax == "" ||
                typeof this_.searchFilters.availableMax == "undefined"
            ) {
                callback();
            }
            if (
                Number(value) > Number(this_.searchFilters.availableMax)
            ) {
                callback(new Error("可售库存起始值不得大于结束值"));
            }
            this_.$refs.searchFilters.clearValidate("availableMax");
            callback();
        };
        var checkAvailableMax = (rule, value, callback) => {
            let this_ = this;
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this_.searchFilters.availableMin == null || this_.searchFilters.availableMin == "" ||
                typeof this_.searchFilters.availableMin == "undefined"
            ) {
                callback();
            }
            if (
                this_.searchFilters.availableMax == null || this_.searchFilters.availableMax == "" ||
                typeof this_.searchFilters.availableMax == "undefined"
            ) {
                callback();
            }
            if (
                Number(value) < Number(this_.searchFilters.availableMin)
            ) {
                callback(new Error("可售库存结束值不得小于起始值"));
            }
            this_.$refs.searchFilters.clearValidate("availableMin");
            callback();
        };
        return {
            filtersRules: {
                totalMin: [{
                    validator: checkTotalMin,
                    trigger: "change"
                }],
                totalMax: [{
                    validator: checkTotalMax,
                    trigger: "change"
                }],
                availableMin: [{
                    validator: checkAvailableMin,
                    trigger: "change"
                }],
                availableMax: [{
                    validator: checkAvailableMax,
                    trigger: "change"
                }]
            },
            selections: [],
            selectedOptionsData1: [], //商家列表数据
            size: "small",
            //2.2.1 公共数据初始化
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageIndex: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: "mini",

            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "name",
                    label: "仓库名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "code",
                    label: "仓库编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "merchantName",
                    label: "商家",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productCode",
                    label: "商品编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productName",
                    label: "商品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "unitName",
                    label: "主计量单位",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "total",
                    label: "实际库存",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "block",
                    label: "冻结库存",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "available",
                    label: "剩余库存",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updateTime",
                    label: "最后更新时间",
                    minWidth: 100,
                    formatter: null
                }
            ],
            searchFilters: {
                name: null,
                type: 1,
                status: null,
                productName: null,
                delete_flag: 0,
                totalMin: null,
                totalMax: null,
                availableMin: null,
                availableMax: null,
                deptId: null,
            },
            operation: false,
            dialogVisible: false
        };
    },

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
        let this_ = this;
        this.utils.request.queryDeptList({}, function (res) {
            if (res.code === "0000") {
                this_.selectedOptionsData1 = res.data;
            }
        });
    },

    methods: {
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {
                    type: 1
                };
            }
            this_.searchFilters.type = 1;
            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            if (this_.searchFilters.totalMin != null) {
                this_.searchFilters.totalMin = Number(this_.searchFilters.totalMin)
            }
            if (this_.searchFilters.totalMax != null) {
                this_.searchFilters.totalMax = Number(this_.searchFilters.totalMax)
            }
            if (this_.searchFilters.availableMin != null) {
                this_.searchFilters.availableMin = Number(this_.searchFilters.availableMin)
            }
            if (this_.searchFilters.availableMax != null) {
                this_.searchFilters.availableMax = Number(this_.searchFilters.availableMax)
            }
            this.utils.request.listMStoreStock(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableList = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        resetForm() {
            this.searchFilters = {};
            this.findPage(null);
        },

        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
            this.findPage();
        },

        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },

        excelDownLoad() {
            this.$confirm("确定下载列表文件?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let this_ = this;
                    let fileName = "实体库存数据导出";
                    if (this_.searchFilters === undefined || this_.searchFilters === null) {
                        this_.searchFilters = {};
                    }
                    this.utils.request.listMStoreStockExcel(this_.searchFilters, function (
                        res
                    ) {
                        if (res.code === "0000" && res.data.length < 10000) {
                            this_.tableList = res.data;
                            this_.totalSize = Number(res.data.length);
                        } else if (res.data.length > 10000) {
                            this_.$message({
                                message: "一次最多导出1万条，建议分配导出。",
                                type: "error"
                            });
                        } else if (res.code === "9999") {
                            this_.$message({
                                message: "没有数据，请重试",
                                type: "error"
                            });
                        }
                    });

                    exportExcel(this_.tableList, this_.tableHeaderList, fileName);
                    this_.findPage(null);
                })
                .catch(() => {});
        }
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        // .el-form-item__content {
        //   height: 32px;
        //   line-height: 32px;
        //   width: 150px;
        // }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        // .el-date-editor.el-input,
        // .el-date-editor.el-input__inner {
        //   width: 150px;
        // }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }
}

.text-align {
    text-align: center !important;
}

.search-button {
    .el-form-item {
        margin-bottom: 0px !important;
    }
}

.t_r {
    .el-form-item {
        margin-bottom: 0px;
    }
}
</style>
